<template>
    <el-button @click="getFormconfig" >获取表单配置</el-button>
    <el-button @click="getFormData" >获取表单json</el-button>
    <form-create 
        v-model:api="fApi"
        v-model="formData"
         @submit="onSubmit"
        :rule="formCreate.parseJson(ruleJson)" :option="formCreate.parseJson(optionsJson)"
   ></form-create>
   <div>
     {{ formdataJson }}
   </div>
   <fc-designer ref="designer" :config="designerConfig"/>

</template>

<script setup>
    import {onMounted, reactive, ref} from 'vue'
    import {formCreate} from '@form-create/designer';
    const designer = ref(null)
    const getFormconfig = ()=>{
        console.log(JSON.stringify(designer.value.getJson()));
        console.log(JSON.stringify(designer.value.getOptionsJson()));
    }
    const fApi = ref({})
    // const formData = reactive({"Fn2lm09heswvbrc": "abc", "Fvtem09heuxubuc": "1"});
    const formdataJson = ref("")
    const getFormData = ()=>{
        // console.log(formData.value)
        formdataJson.value = fApi.value.toJson();  // fApi.value.toJson();
    }

    const onSubmit = (formData)=>{
        formdataJson.value = JSON.stringify(formData)
    }

    onMounted(()=>{
        fApi.value.setData("data",{"Fn2lm09heswvbrc":"w","Fvtem09heuxubuc":"1"})
    })

    const designerConfig = ref({
        // showSaveBtn:false,
        showDevice: false, // 隐藏多端适配选项
         //控制字段ID输入框能否输入
         fieldReadonly: false
        //  hiddenItem: ['input', 'password'],
          // 隐藏所有子表单组件
        //   hiddenMenu: ['subform']
    })
    
  
  const ruleJson  = "[{\"type\":\"input\",\"field\":\"Fn2lm09heswvbrc\",\"title\":\"测试\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_Fj8km09heswvbsc\",\"name\":\"ref_Fe61m09heswvbtc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"input\"},{\"type\":\"radio\",\"field\":\"Fvtem09heuxubuc\",\"title\":\"单选框\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"选项00\",\"value\":\"1\"},{\"label\":\"选项01\",\"value\":\"2\"},{\"label\":\"选项02\",\"value\":\"3\"}],\"_fc_id\":\"id_Fcz3m09heuxubvc\",\"name\":\"ref_F5i3m09heuxubwc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"radio\"}]"

  const optionsJson  = "{\"form\":{\"inline\":false,\"hideRequiredAsterisk\":false,\"labelPosition\":\"right\",\"size\":\"default\",\"labelWidth\":\"125px\"},\"resetBtn\":{\"show\":false,\"innerText\":\"重置\"},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"}}"
</script>

<style  scoped>

</style>